<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fun1(obj) {
            var LED = new XMLHttpRequest("LED");
            var url = "";

            if (obj == 'a') {
                LED.open("post", url, true);
                LED.send("contrl=0 1");
                console.log("LED灯开");
            }
            else if (obj == 'b') {
                LED.open("post", url, true);
                LED.send("contrl=0 0");
                console.log("LED灯关");
            }
        }
        function fun2(obj) {
            var FM = new XMLHttpRequest("FM");
            var url = "";
            if (obj == '2') {
                FM.open("post", url, true);
                FM.send("contrl=1 1");
                console.log("蜂鸣器开");
            }
            else if (obj == '3') {
                FM.open("post", url, true);
                FM.send("contrl=1 0");
                console.log("蜂鸣器关");
            }
        }
        function getinfo1() {
            // 获取标签名为usrname的标签，赋值给v
            var v = document.getElementsByName("usrname1");
            console.log(v[0].value);
            v[0].value = "user";
        }
        function getinfo2() {
            // 获取标签名为usrname的标签，赋值给v
            var v = document.getElementsByName("usrname2");
            // console.log(v[0].value);
            var xhr = new XMLHttpRequest();//创建一个对象
            var url = "";
            xhr.open("post", url, true);
            xhr.send("modbus");//发送请求正文
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200)//请求完成且成功
                {
                   var arry = xhr.responseText.split(" ");//响应正文
                   v[0].value=arry[0];
                   v[1].value=arry[1];
                   v[2].value=arry[2];
                   v[3].value=arry[3];
                }
            };

        }
    </script>
</head>

<body style="background-image: url('bccc8490338024fcb1acafe3d3d82ef.jpg'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; position: relative;">
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.7); z-index: -1;"></div>
       <div style="position: relative; z-index: 1; padding: 20px;">
        <div>
            <div >
                用户名:
                <br>
                <input type="text" name="usrname1" value="admin">
                <input type="button" name="flash" onclick="getinfo1()">
                <br>
            </div>
            <div>
                <br>
                光线传感器:
                <br>
                <input type="text" name="usrname2" value="admin">
                <input type="button" name="flash" onclick="getinfo2()">
                <br>
                加速度传感器X:
                <br>
                <input type="text" name="usrname2" value="admin">
                <input type="button" name="flash" onclick="getinfo2()">
                <br>
                加速度传感器Y:
                <br>
                <input type="text" name="usrname2" value="admin">
                <input type="button" name="flash" onclick="getinfo2()">
                <br>
                加速度传感器Z:
                <br>
                <input type="text" name="usrname2" value="admin">
                <input type="button" name="flash" onclick="getinfo2()">
                <br>
            </div>
            <div>
                <br>
                LED灯:
                <br>
                开启:
                <input type="radio" name="LED" id="a" checked="checked" onclick="fun1(id)">
                关闭:
                <input type="radio" name="LED" id="b" onclick="fun1(id)">
                <br>
            </div>
            <div>
                <br>
                蜂鸣器:
                <br>
                开启:
                <input type="radio" name="FM" id="2" checked="checked" onclick="fun2(id)">
                关闭:
                <input type="radio" name="FM" id="3" onclick="fun2(id)">
                <br>
            </div>
            <br>
        </div>
    </div>
</body>

</html>